<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <link rel="stylesheet" href="css/mainstyle.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel=stylesheet href="css/minirefresh.css">
      <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/loading.js"></script>
    <script src="js/echarts.common.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/minirefresh.js"></script>
    <script type="text/javascript" src="js/commonTool.js"></script>
   <script>
        $(function(){
             $("#header").load("header.html");
            var page0 = 0,page1=0,page2=0,page3=0,page4=0;
            var bindEvent = Tool.bindEvent,
                addToken=Tool.addTokenToParams,
                // 记录一个最新
                maxDataSize = 10,
                listDomArr = [],
                requestDelayTime = 600,
                currIndex = 0,                
                miniRefreshArr = [];

            var initMiniRefreshs = function(index) {
                listDomArr[index] = '#listdata' + index               
                miniRefreshArr[index] = new MiniRefresh({
                    container: '#minirefresh' + index,
                    down: {
                       // isLock:true,                     
                        isAutoResetUpLoading:true,
                        callback: function() {
                            doAjax('down',listDomArr[index],miniRefreshArr[index],index);

                        }
                    },
                    up: {
                        isAuto: true,
                        callback: function() {                          
                            doAjax('up',listDomArr[index],miniRefreshArr[index],index);    
                        }
                    }
                });
            };
            
        // 组装 ajax 分页函数。参数 downOrUp 判断是下拉刷新还是上拉加载。
        // 特别提示：若你仅使用下拉刷新或上拉加载的其中一项，可不用组装 ajax 分页函数了，直接将 ajax 分页放在下拉刷新或上拉加载的回调 callback 里。
        var doAjax = function (downOrUp,domName,miniRefresh,index) {
            if (downOrUp == 'down') {
                //page = 1;// 下拉刷新页码设置
                if(index==0){
                    page0=1;
                }else if(index==1){
                    page1=1
                }
                else if(index==2){
                    page2=1
                }
                else if(index==3){
                    page3=1
                }
                else if(index==4){
                    page4=1
                }
            } else {
                if(index==0){
                    page0++;
                }else if(index==1){
                    page1++;
                }
                else if(index==2){
                    page2++;
                }
                else if(index==3){
                    page3++;
                }
                else if(index==4){
                    page4++;
                }
                //page++;// 上拉加载递增页码
            }
            var jparams;
            if(index==0){
                jparams={'pageNum':page0};
            }else if(index==1){
                jparams={'pageNum':page1,'targetStat':'0'};
            }else if(index==2){
                jparams={'pageNum':page2,'targetStat':'-1'};
            }else if(index==3){
                jparams={'pageNum':page3,'targetStat':'1'};
            }else if(index==4){
                jparams={'pageNum':page4,'targetStat':'2'};
            }
            
            $.ajax({
              url: doTargetGet,// 请求网址
              type: 'POST',
    		  contentType:"application/json;charset=UTF-8",
    		  data:JSON.stringify(addToken(jparams)),
    		  xhrFields: {
    		  withCredentials: true
    		           },
    		  crossDomain: true,
              success: function (response) {
                  console.log(response.data);
                  var tarStatus=Tool.tarStatus;
                    // 下面这段请根据自己的数据结构来处理
                    var arrLen = response.data.length;
                    if (arrLen > 0) {
                        var html = '';
                        $.each(response.data, function (key, value) {
                            //console.log(key+","+value);
                            html += '<li class="list-item">' +
                                '<a href="javascript:;" class="news-link">' +
                                '<span class="news-title">'+'任务标题:' + value.targetTitle + '</span>' +'<br>'+
                                '<span class="news-data" >' + '申请人:'+value.userName + '</span>' +'<br>'+
                                '<span class="news-data" >' + '任务状态:'+tarStatus(value.targetStatus) + '</span>'+'&nbsp&nbsp&nbsp&nbsp'+
                                '<span class="news-data" >' + '任务星级:'+value.star + '</span>'+
                                '<span id="newsid" style="display: none" >' +value.id + '</span>'+
                                '</a>' +
                                '</li>';
                        });
                        setTimeout(function () { // 使用 setTimeout 函数是方便演示的，你可以不用 setTimeout 函数
                            if (downOrUp == 'down') {
                                $(domName).html('');
                                $(domName).append(html);// DOM 插入数据
                                miniRefresh.endDownLoading(true);// 结束下拉刷新
                            } else {
                                $(domName).append(html);
                                 miniRefresh.endUpLoading(false);
                            }
                        }, 600);
                    } else {
                        if (downOrUp == 'down') {
                            $(domName).html('');
                            miniRefresh.endDownLoading(true);
                        } else {
                            miniRefresh.endUpLoading(true);
                        }
                    }
                  //跳转到具体任务界面
                  $(".list-item").click(function(){
                      var tarid=$(this).find("#newsid").text();
                      $.cookie('targetId', tarid);
                      window.location="manageTarget.html";
                  });
                  
                  
                },
                error: function () {
                    if (downOrUp == 'down') {
                        $(domName).html('');
                        miniRefresh.endDownLoading(true);
                    } else {
                        miniRefresh.endUpLoading(true);
                    }
                }
            });
        };
            
            var navControl = document.querySelector('.nav-control'),
                CLASS_HIDDEN = 'minirefresh-hidden';

            bindEvent('.nav-control p', function(e) {
                //切换导航条的时候清楚cookie
                $.removeCookie('tarIndex');
                var type = this.getAttribute('list-type');             
                type = +type;
                if (type !== currIndex) {
                    navControl.querySelector('.active').classList.remove('active');
                    this.classList.add('active');                    
                    document.querySelector('#minirefresh' + currIndex).classList.add(CLASS_HIDDEN);
                    document.querySelector('#minirefresh' + type).classList.remove(CLASS_HIDDEN);                    
                    currIndex = type;                    
                    if (!miniRefreshArr[currIndex]) {
                        initMiniRefreshs(currIndex);
                    }
                }
            }, 'click');
            
            // 初始化
            var index= $.cookie('tarIndex');
            if(index==undefined){
                initMiniRefreshs(0);
            }else{
                $(".nav-control").children().eq(parseInt(index)).trigger('click');   
            }
            
        });
        </script>
    <style>
        #segment{
            margin: 0 auto;
            width: 100%;
            height: 5%;
            min-height: 25px;
            text-align: center;
            background-color: lightgray;
            border: solid 1px lightgray;
        }
        #segment button{
            position: relative;
            border: 0px;
            width: 19%;
            height: 100%;
            min-height: 25px;
            margin-left: 1%;
            float: left;
        }
        .segment_class{
            background-color: dodgerblue;
            color: white;
        }
        #chartData{
            position: relative;
            width: 100%;
            height: 70%;
            border-top: solid 1px lightgray;
            
        }

       
    </style>
    <title>运营平台</title>
</head>
<body>
    <div id="header"></div>
    <div id="content">
<!--
        <div id="segment">
              <button class="segment_class">所有</button>
              <button class="segment_class">等待审批</button>
              <button class="segment_class">退回</button>
              <button class="segment_class">进行中</button>
              <button class="segment_class">完成</button>
        </div>
-->
       
        <div id="chartData" class="content">
                 <div class="nav-control">
                <p class="active" list-type="0">所有</p>
                <p list-type="1">等待审批</p>
                <p list-type="2">退回</p>
                <p list-type="3">进行中</p>
                <p list-type="4">完成</p>
            </div>
            <div id="minirefresh0" class="minirefresh-wrap">

                <div class="minirefresh-scroll">

                    <ul class="data-list" id="listdata0">

                    </ul>
                </div>
            </div>
            <div id="minirefresh1" class="minirefresh-wrap minirefresh-hidden">

                <div class="minirefresh-scroll">

                    <ul class="data-list" id="listdata1">

                    </ul>
                </div>
            </div>
            <div id="minirefresh2" class="minirefresh-wrap minirefresh-hidden">

                <div class="minirefresh-scroll">

                    <ul class="data-list" id="listdata2">

                    </ul>
                </div>
            </div>
            <div id="minirefresh3" class="minirefresh-wrap minirefresh-hidden">

                <div class="minirefresh-scroll">

                    <ul class="data-list" id="listdata3">

                    </ul>
                </div>
            </div>
            <div id="minirefresh4" class="minirefresh-wrap minirefresh-hidden">

                <div class="minirefresh-scroll">

                    <ul class="data-list" id="listdata4">

                    </ul>
                </div>
            </div>
            
    </div>
    </div>
</body>
</html>


